<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>吉普车</title>
    <style>
        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline
        }
        
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block
        }
        
        body {
            line-height: 1
        }
        
        ol,
        ul {
            list-style: none
        }
        
        blockquote,
        q {
            quotes: none
        }
        
        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: '';
            content: none
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0
        }
    </style>
    <style>
        body,
        html {
            height: 100%;
        }
        
        body {
            padding: 0;
            margin: 0;
            height: 500px;
        }
        
        .country-wrap {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .push-bottom {
            position: absolute;
            bottom: 0;
            height: 100%;
        }
        
        .bottom-ground {
            background: #8d773e;
            width: 102%;
            left: -1%;
            height: 60px;
            bottom: 0;
            position: absolute;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
        }
        
        .street {
            background: #7a7a7a;
            height: 80px;
            width: 102%;
            position: absolute;
            bottom: 0;
            box-shadow: 0 1px 16px rgba(111, 35, 51, 0.4) inset;
        }
        
        .street:after {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 10px;
            background: #cdbcb4;
            bottom: 0;
            border-bottom: 3px solid #72625a;
            z-index: 1;
        }
        
        .street:before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 7px;
            background: #c2a99d;
            bottom: -7px;
            z-index: 1;
        }
        
        .street-stripe {
            background: #d4d4d4;
            height: 8px;
            width: 100px;
            position: absolute;
            bottom: 44px;
            border-radius: 2px;
            box-shadow: 200px 0 0 #d4d4d4, 400px 0 0 #d4d4d4, 600px 0 0 #d4d4d4, 800px 0 0 #d4d4d4, 1000px 0 0 #d4d4d4, 1200px 0 0 #d4d4d4, 1400px 0 0 #d4d4d4, 1600px 0 0 #d4d4d4, 1800px 0 0 #d4d4d4, 2000px 0 0 #d4d4d4;
        }
        /*styles for car*/
        
        .car {
            position: absolute;
            top: 0%;
            left: 40%;
            z-index: 10;
            -moz-animation: myfirst 10s linear infinite;
            -webkit-animation: myfirst 10s linear infinite;
        }
        
        @-moz-keyframes myfirst {
            0% {
                left: -25%;
            }
            100% {
                left: 100%;
            }
        }
        
        @-webkit-keyframes myfirst {
            0% {
                left: -25%;
            }
            100% {
                left: 100%;
            }
        }
        
        .tyre {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #3f3f40;
            position: absolute;
            z-index: 2;
            left: 9px;
            top: 20px;
            -moz-animation: tyre-rotate 1s infinite linear;
            -webkit-animation: tyre-rotate 1s infinite linear;
        }
        
        @-moz-keyframes tyre-rotate {
            from {
                -moz-transform: rotate(-360deg);
            }
            to {
                -moz-transform: rotate(0deg);
            }
        }
        
        @-webkit-keyframes tyre-rotate {
            from {
                -webkit-transform: rotate(-360deg);
            }
            to {
                -webkit-transform: rotate(0deg);
            }
        }
        
        .tyre:before {
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #bdc2bd;
            position: absolute;
            top: 5px;
            left: 5px;
        }
        
        .gap {
            background: #3f3f40;
            width: 2px;
            height: 4px;
            position: absolute;
            left: 14px;
            top: 8px;
            box-shadow: 0 9px 0 #3f3f40;
        }
        
        .gap:before {
            content: '';
            display: block;
            width: 2px;
            height: 4px;
            position: absolute;
            background: #3f3f40;
            box-shadow: 0 12px 0 #3f3f40;
            -webkit-transform: rotate(-90deg);
            -webkit-transform-origin: 0 7px;
            -moz-transform: rotate(-90deg);
            -moz-transform-origin: 0 7px;
            z-index: 3;
        }
        
        .car-base {
            position: absolute;
            display: block;
            width: 125px;
            height: 30px;
            background: #000000;
            border-radius: 10% 10% 50% 50% / 60% 100% 20% 10%;
            -webkit-transform: rotate(-2deg);
            -moz-transform: rotate(-2deg);
            border: solid;
            border-color: #000000;
        }
        
        .back-bonet {
            background: #4c4b4b;
            border-radius: 54% 25% 0 0;
            height: 22px;
            left: 11px;
            position: absolute;
            top: 8px;
            width: 40px;
        }
        
        .tyre.front {
            left: 94px;
        }
        
        .car-body {
            border-bottom: 24px solid #d1352b;
            height: 0;
            top: 10px;
            width: 120px;
            position: relative;
        }
        
        .car-body:before {
            content: '';
            display: inline-block;
            width: 30px;
            height: 24px;
            position: absolute;
            right: -5px;
            background: #d1352b;
            border-top-right-radius: 4px;
            z-index: 1;
        }
        
        .car-body:after {
            content: '';
            display: inline-block;
            width: 121px;
            border-bottom: 1px solid #942b25;
            border-right: 2px solid transparent;
            height: 0;
            z-index: 2;
            position: absolute;
        }
        
        .car-gate {
            width: 32px;
            height: 20px;
            background: #d1352b;
            border-radius: 0 0 2px 8px / 0 0 2px 8px;
            box-shadow: 0 0 0 1px #892924;
            position: absolute;
            left: 48px;
        }
        
        .car-gate:before {
            content: '';
            width: 8px;
            height: 2px;
            background: #4c4b4b;
            position: absolute;
            top: 2px;
            left: 4px;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        }
        
        .car-top-back {
            background: none repeat scroll 0 0 #4C4B4B;
            border-radius: 5px 0 0 0;
            height: 20px;
            left: 4px;
            position: absolute;
            top: -20px;
            width: 58px;
        }
        
        .car-top-back:before {
            width: 30px;
            height: 15px;
            background: #736f6f;
            content: '';
            position: absolute;
            top: 3px;
            left: 8px;
            border-radius: 2px;
        }
        
        .car-top-back:after {
            content: '';
            background: #4c4b4b;
            border-radius: 30%;
            height: 5px;
            left: 3px;
            position: absolute;
            top: -1px;
            width: 62px;
        }
        
        .car-top-front {
            top: -19px;
            position: absolute;
            left: 47px;
            width: 20px;
            height: 20px;
            background: #dc4630;
            border-left: 1px solid #892924;
            border-radius: 2px 0 0 0;
        }
        
        .car-top-front:after {
            width: 26px;
            height: 20px;
            -webkit-transform: skew(37deg);
            -moz-transform: skew(37deg);
            background: #dc4630;
            content: '';
            position: absolute;
            top: 0;
            left: 6px;
            border-radius: 4px 0 4px 4px;
        }
        
        .car-top-front:before {
            width: 12px;
            height: 5px;
            background: #dc4630;
            content: '';
            position: absolute;
            top: 14px;
            left: 28px;
            z-index: 1;
            border: solid #a82e27;
            border-width: 0 1px 1px 0;
        }
        
        .wind-sheild {
            top: 3px;
            left: 3px;
            position: absolute;
            z-index: 3;
            width: 18px;
            height: 12px;
            background: #f5e7e7;
            border-radius: 0 3px 0 0;
        }
        
        .wind-sheild:after {
            width: 12px;
            height: 12px;
            -webkit-transform: skew(25deg);
            -moz-transform: skew(25deg);
            background: #f5e7e7;
            content: '';
            position: absolute;
            top: 0;
            left: 10px;
            border-radius: 3px;
        }
        
        .boundary-tyre-cover {
            position: absolute;
            top: 14px;
            left: 10px;
            border-bottom: 20px solid #4c4b4b;
            border-right: 10px solid transparent;
            height: 0;
            width: 20px;
        }
        
        .boundary-tyre-cover:before {
            content: '';
            position: absolute;
            display: inline-block;
            background: #4c4b4b;
            height: 20px;
            width: 15px;
            -webkit-transform: skewX(-20deg);
            -moz-transform: skewX(-20deg);
            border-radius: 3px;
            left: -6px;
            top: 0;
        }
        
        .boundary-tyre-cover:after {
            content: '';
            position: absolute;
            display: inline-block;
            background: #4c4b4b;
            height: 20px;
            width: 20px;
            -webkit-transform: skewx(40deg);
            -moz-transform: skewX(40deg);
            border-radius: 3px;
            right: -14px;
            top: 0;
        }
        
        .boundary-tyre-cover-inner {
            position: absolute;
            top: 4px;
            left: 4px;
            border-bottom: 16px solid black;
            border-right: 10px solid transparent;
            height: 0;
            width: 15px;
            z-index: 2;
        }
        
        .boundary-tyre-cover-inner:before {
            content: '';
            position: absolute;
            display: inline-block;
            background: black;
            height: 16px;
            width: 15px;
            -webkit-transform: skewX(-20deg);
            -moz-transform: skewX(-20deg);
            border-radius: 3px 3px 0 0;
            left: -6px;
            top: 0;
        }
        
        .boundary-tyre-cover-inner:after {
            content: '';
            position: absolute;
            display: inline-block;
            background: black;
            height: 16px;
            width: 20px;
            -webkit-transform: skewx(40deg);
            -moz-transform: skewX(40deg);
            border-radius: 3px 3px 0 0;
            right: -11px;
            top: 0;
        }
        
        .boundary-tyre-cover-back-bottom {
            position: absolute;
            width: 14px;
            height: 8px;
            background: #4c4b4b;
            top: 12px;
            left: -19px;
        }
        
        .bonet-front {
            background: #d1352b;
            border-radius: 5px 258px 0 38px / 36px 50px 0 0;
            height: 4px;
            position: absolute;
            right: 0;
            top: -4px;
            width: 40px;
            z-index: 0;
        }
        
        .back-curve {
            background: none repeat scroll 0 0 #4C4B4B;
            border-radius: 960% 100% 0 0;
            height: 20px;
            left: -3px;
            position: absolute;
            top: 1px;
            transform: rotate(6deg);
            width: 5px;
        }
        
        .stepney {
            height: 6px;
            left: -4px;
            position: absolute;
            top: 6px;
            width: 8px;
            z-index: -1;
            background: #3f3f40;
        }
        
        .stepney:before {
            width: 8px;
            height: 12px;
            background: #3f3f40;
            content: '';
            position: absolute;
            top: -10px;
            left: -7px;
            border-radius: 3px 3px 0 0;
        }
        
        .stepney:after {
            width: 8px;
            height: 12px;
            background: #0d0c0d;
            content: '';
            position: absolute;
            top: 0px;
            left: -7px;
            border-radius: 0 0 3px 3px;
        }
        
        .tyre-cover-front {
            background: #4c4b4b;
            height: 4px;
            left: 97px;
            position: absolute;
            top: 13px;
            width: 22px;
            z-index: 1;
        }
        
        .tyre-cover-front:before {
            background: none repeat scroll 0 0 #4c4b4b;
            content: "";
            display: inline-block;
            height: 21px;
            left: -10px;
            position: absolute;
            top: 0;
            transform: skewX(-30deg);
            width: 10px;
            z-index: 6;
            border-radius: 4px 0 0 0;
        }
        
        .tyre-cover-front:after {
            background: none repeat scroll 0 0 #4c4b4b;
            content: "";
            display: inline-block;
            height: 6px;
            left: 14px;
            position: absolute;
            top: 0;
            transform: skewX(30deg);
            width: 17px;
            z-index: 6;
            border-radius: 0 4px 2px 0;
        }
        
        .boundary-tyre-cover-inner-front {
            position: absolute;
            top: 4px;
            left: 4px;
            border-bottom: 16px solid black;
            border-right: 10px solid transparent;
            height: 0;
            width: 15px;
            z-index: 7;
        }
        
        .boundary-tyre-cover-inner-front:before {
            background: none repeat scroll 0 0 #000000;
            border-radius: 3px 3px 0 0;
            content: "";
            display: inline-block;
            height: 17px;
            left: -10px;
            position: absolute;
            top: 0;
            transform: skewX(-30deg);
            width: 15px;
        }
        
        .boundary-tyre-cover-inner-front:after {
            content: '';
            position: absolute;
            display: inline-block;
            background: black;
            height: 16px;
            width: 20px;
            -webkit-transform: skewx(25deg);
            -moz-transform: skewX(25deg);
            border-radius: 3px 3px 0 0;
            right: -12px;
            top: 0;
        }
        
        .base-axcel {
            background: none repeat scroll 0 0 black;
            bottom: -15px;
            height: 10px;
            left: 30px;
            position: absolute;
            transform: rotate(-2deg);
            width: 70px;
            z-index: -1;
        }
        
        .base-axcel:before {
            background: none repeat scroll 0 0 black;
            border-radius: 0 0 0 10px / 0 0 0 5px;
            content: "";
            height: 10px;
            left: -35px;
            position: absolute;
            top: -2px;
            transform: rotate(6deg);
            width: 30px;
        }
        
        .base-axcel:after {
            background: none repeat scroll 0 0 black;
            border-radius: 0 0 0 10px / 0 0 0 5px;
            content: "";
            height: 10px;
            right: -33px;
            position: absolute;
            top: -1px;
            transform: rotate(-4deg);
            width: 40px;
            border-radius: 0 10px 5px 0;
        }
        
        .front-bumper {
            background: none repeat scroll 0 0 #4c4b4b;
            border-radius: 0 2px 2px 0;
            height: 8px;
            position: absolute;
            right: -15px;
            width: 11px;
            z-index: 1;
            -moz-transform: rotate(-5deg);
            -webkit-transform: rotate(-5deg);
        }
        
        .front-bumper:before {
            background: none repeat scroll 0 0 #000000;
            content: "";
            height: 10px;
            left: -7px;
            position: absolute;
            transform: rotate(-22deg);
            width: 9px;
            z-index: 1;
        }
        
        .car-shadow {
            background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
            bottom: -15px;
            box-shadow: -5px 10px 15px 3px #000000;
            left: -7px;
            position: absolute;
            width: 136px;
        }
        
        .hill {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 250px;
            z-index: -1;
        }
        
        .hill:after {
            content: '';
            position: absolute;
            bottom: -100px;
            right: -400px;
            width: 120%;
            height: 110%;
            border-top-right-radius: 100%;
            border-top-left-radius: 0%;
            background-color: #94c943;
            -moz-transform: rotate(-12deg);
            -webkit-transform: rotate(-12deg);
            box-shadow: 0 0 25px #cbf191 inset;
        }
        
        .hill:before {
            background-color: #93cc3a;
            border-top-left-radius: 0;
            border-top-right-radius: 100%;
            bottom: -70px;
            content: "";
            height: 90%;
            left: -54px;
            position: absolute;
            transform: rotate(5deg);
            width: 120%;
            box-shadow: 0 0 10px #cbf191 inset;
        }
    </style>
</head>

<body>

    <div class="country-wrap">
        <div style="text-align:center;clear:both">
        </div>
        <div class="street">
            <div class="car">
                <!--<div class="car-base"></div>-->
                <div class="car-body">
                    <div class="car-top-back">
                        <div class="back-curve"></div>
                    </div>
                    <div class="car-gate"></div>
                    <div class="car-top-front">
                        <div class="wind-sheild"></div>
                    </div>
                    <div class="bonet-front"></div>
                    <div class="stepney"></div>
                </div>
                <div class="boundary-tyre-cover">
                    <div class="boundary-tyre-cover-back-bottom"></div>
                    <div class="boundary-tyre-cover-inner"></div>
                </div>
                <div class="tyre-cover-front">
                    <div class="boundary-tyre-cover-inner-front"></div>
                </div>
                <div class="base-axcel">

                </div>
                <div class="front-bumper"></div>
                <div class="tyre">
                    <div class="gap"></div>
                </div>
                <div class="tyre front">
                    <div class="gap"></div>
                </div>
                <div class="car-shadow"></div>
            </div>
        </div>
        <div class="street-stripe"></div>
        <div class="hill">
        </div>

    </div>
</body>

</html>